<template>

  <el-row v-for="item in articles" :key="item.id">

  <el-card>

    <router-link :to="{ name:'ArticleDetail', params: { id: item.id }}" style="">{{item.title}}</router-link>
    <h4>更新时间：{{item.updatetime}}</h4><p/>
    <h5>{{item.description}}</h5><p/>


    <el-tag type="info" v-for="i in item.tags" :key="i.id" >{{i.name}}</el-tag>
      <p/>


  </el-card></el-row>
</template>

<script>
import {getArticles} from "@/api/article";

export default {
  name: "BlogIndex",
  data(){
    return{
      articles:[]
    }
  },
  methods:{
    listArticles(){
      let that=this
      getArticles().then(res=>{
        that.articles=res.data
      })
    }
  },
  mounted() {
    this.listArticles()
  },

}
</script>

<style scoped>


.el-tag{
  margin-left: 10px;
}


.el-card{
  width: 100%;
  text-align: left;
  margin-bottom: 1%;
}
a {
  text-decoration: none;
}

.router-link-active {
  text-decoration: none;
}

</style>
